<template>
  <scroll ref="suggest"
          class="suggest"
          :dataA="result"
          :pullup="pullup"
          :beforeScroll="beforeScroll"
          @scrollToEnd="searchMore"
          @beforeScroll="listScroll"
  >
    <ul class="suggest-list">
      <li @click="selectItem(item,index)" class="suggest-item" v-for="(item,index) in result">
        <div class="icon">
          <i :class="getIconCls(item,index)"></i>
        </div>
        <div class="name">
          <p class="text" v-html="getDisplayName(item,index)"></p>
        </div>
      </li>
      <loading v-show="hasMore&&this.goongdata.length>0" title=""></loading>
			<h4 class="tiptext" style="font-size: 14px;text-align: center;padding: 0 0 40px 0;" 
			    v-show="!hasMore&&this.goongdata.length>this.perlength">
					我已经没有数据拉～求求你不要在拉了
			</h4>
    </ul>
	  <!-- 暂无 -->
    <div v-show="!hasMore && !result.length" class="no-result-wrapper">
      <no-result title="抱歉，暂无搜索结果"></no-result>
    </div>
  </scroll>
</template>

<script >
  import Scroll from 'base/scroll/scroll'
  import Loading from 'base/loading/loading'
  import NoResult from 'base/no-result/no-result'
  import {ERR_OK} from 'api/config'
  import {createSong} from 'common/js/song'
  import {mapMutations, mapActions} from 'vuex'
  import Singer from 'common/js/singer'
	import axios from 'axios'
  const TYPE_SINGER = 'singer'
  const perpage = 20

  export default {
    props: {
      showSinger: {//是否展示歌手
        type: Boolean,
        default: true
      },
      query: {
        type: String,
        default: ''
      },
			perlength:{ //默认显示一次性加载多少条数
				type: Number,
				default: 15
			}
    },
    data() {
      return {
        page: 1,
        pullup: true,//下拉刷新
        beforeScroll: true,//失去焦点
        hasMore: true,//是否加载完标志位
        result: [],
				comedata:[],
				goongdata:"",//页码
      }
    },
    methods: {
      refresh() {
        this.$refs.suggest.refresh()
      },
      search() { //搜索事件
        this.page = 1
				this.comedata=[]
        this.hasMore = true
        this.$refs.suggest.scrollTo(0, 0)
				let url=`https://api.bzqll.com/music/tencent/search?key=579621905&s=${this.query}&limit=100&offset=0&type=song`
				axios.get(url).then((res) => {
					if (res.status === 200) {
						this.yema=[]
						let s=0;
						let up=0
						res.data!=[]?(this.goongdata=res.data.data):(this.goongdata=[])//是否有数据 
					  this.goongdata.length>0?this.goongdata.unshift(res.data.data[0]):res.data//歌手信息
						this.comedata=Math.ceil(res.data.data.length/this.perlength)//判断多少页
						this.result = res.data.data.slice(0, this.perlength)
						console.log("this.goongdata.unshift(res.data.data[0])",this.goongdata.unshift(res.data.data[0]))
						this._checkMore(this.goongdata)
					}
				}).catch(function (result) {
					 console.log("pppppppp",result)
				});
      },
      searchMore() { //上拉刷新事件
        if (!this.hasMore) {return}
				if(this.page>=this.comedata){ //总数据不能大于页面
					console.log("我已经没有数据拉～求求你不要在拉了")
					this.hasMore=false
					return
				}
        this.page++
				this.result=this.goongdata.slice(0, this.perlength*(this.page))
				console.log('searchMore',this.result)
      },
      listScroll() {//失去焦点
        this.$emit('listScroll')
      },
      selectItem(item,index) {//点击跳转
        if (index === 0) {
          const singer = new Singer({
            id: item.id, 
            name: item.singer
          })
          this.issosbtn(2) //改变状态
          this.$router.push({path:`/search/${item.id}`}),
					console.log("singer99",singer)
					console.log("item.id9",singer)
          this.setSinger(singer) //歌手数据
        } else {
					let obj={
						 data:this.goongdata,
						 index
					}
					console.log("singer90",this.goongdata)
					console.log("item.id90",index)
          this.insertSong(obj)
					//this.insertSong(item,index)
        }
        this.$emit('select', item)
      },
      getDisplayName(item,index) { //获取歌手姓名 歌曲信息
        if (index === 0) {
          return item.singer
        } else {
          return `${item.name}-${item.singer}`
        }
      },
      getIconCls(item,index) { //歌手音乐头像
        if (index === 0) {
          return 'icon-mine'
        } else {
          return 'icon-music'
        }
      },
      _checkMore(data) { //是否还有数据  是否需要上拉加载
        const song = data
				if (!song.length || this.perlength>=song.length) {
				  this.hasMore = false
				}
      },
      ...mapMutations({
        setSinger: 'SET_SINGER', //歌手数据
				issosbtn:'issosbtn'//设置排行榜数据
      }),
      ...mapActions([
        'insertSong'
      ])
    },
    watch: {
      query(newQuery) {
				if(newQuery){
					this.search(newQuery)
				}
      }
    },
    components: {
      Scroll,
      Loading,
      NoResult
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .suggest
    height: 100%
    overflow: hidden
    .suggest-list
      padding: 0 30px
      .suggest-item
        display: flex
        align-items: center
        padding-bottom: 20px
      .icon
        flex: 0 0 30px
        width: 30px
        [class^="icon-"]
          font-size: 14px
          color: $color-text-d
      .name
        flex: 1
        font-size: $font-size-medium
        color: $color-text-d
        overflow: hidden
        .text
          no-wrap()
		.no-result-wrapper
      position: absolute
      width: 100%
      top: 50%
      transform: translateY(-50%)
			
			
</style>